import React from "react";

// `useDebugValue` 可用于在 React 开发者工具中显示自定义 hook 的标签。

import useCounter from "./hooks/useCounter";
import useTodoList from "./hooks/useTodoList";

const App = () => {
  const [count, add, minus] = useCounter(10);
  const [list, value, handleChange, push] = useTodoList();

  return (
    <>
      <h2>useDebugValue</h2>
      <h4>计数器</h4>
      <button onClick={minus}>-</button>
      <span>{count}</span>
      <button onClick={add}>+</button>

      <hr />

      <h4>todolist</h4>
      <input type="text" value={value} onChange={handleChange} />
      <button onClick={push}>添加</button>
      <ul>
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};

export default App;
